<script setup lang="ts">
  import { createAppKit, useAppKit } from '@reown/appkit/vue'
  import { EthersAdapter } from '@reown/appkit-adapter-ethers'
  import { mainnet, arbitrum } from '@reown/appkit/networks'

  // 1. Get projectId from https://cloud.reown.com
  const projectId = '4f89c3a333831b942aeb8c4abb65b6f7'

  // 2. Create your application's metadata object
  const metadata = {
    name: 'My Website',
    description: 'My Website description',
    url: 'https://mywebsite.com', // url must match your domain & subdomain
    icons: ['https://avatars.mywebsite.com/']
  }

  // 3. Create a AppKit instance
   createAppKit({
    adapters: [new EthersAdapter()],
    networks: [mainnet, arbitrum],
    metadata,
    projectId,
    features: {
      analytics: true // Optional - defaults to your Cloud configuration
    }
  })

  // 4. Use modal composable
  const modal = useAppKit()
</script>

<template>
  <appkit-button />
  <br />
    <div>vue------------------</div>
    <br />
  <button @click="modal.open()">Open Connect Modal</button>
  <button @click="modal.open({ view: 'Networks' })">Open Network Modal</button>
</template>